<template lang="pug">
  #home
    .footer
      ul
        li(class="navItem" v-for="(item, index) in navs", :key="index", @click="showSubNav(index)") {{item.navTitle}}
          ul.subNavContainer(v-show="nowId == index")
            li(class="subNavItem", v-for="($item, $index) in item.subNavs", :key="$index", @click="goPage($item)") {{$item.navTitle}}
</template>
<script>
export default {
  data () {
    return {
      navs: [
        {
          navTitle: '学习',
          subNavs: [
            {
              navTitle: '综合',
              path: '/comprehensive'
            },
            {
              navTitle: '新思想',
              path: ''
            },
            {
              navTitle: '大讲堂',
              path: ''
            },
            {
              navTitle: '读书',
              path: ''
            },
            {
              navTitle: '考一考',
              path: ''
            }
          ]
        },
        {
          navTitle: '大讲堂',
          subNavs: [
            {
              navTitle: '考一考',
              path: ''
            },
            {
              navTitle: '学习进行时',
              path: ''
            },
            {
              navTitle: '主题教育',
              path: ''
            },
            {
              navTitle: '课程学习',
              path: ''
            }
          ]
        },
        {
          navTitle: '党群服务',
          subNavs: [
            {
              navTitle: '党群服务中心',
              path: ''
            },
            {
              navTitle: '党员志愿服务',
              path: ''
            },
            {
              navTitle: '民生微实事',
              path: ''
            }, {
              navTitle: '民生畅达窗口',
              path: ''
            },
            {
              navTitle: '党建电子地图',
              path: ''
            }
          ]
        },
        {
          navTitle: '个人中心',
          path: ''
        }
      ],
      nowId: null
    }
  },
  methods: {
    /**
       * 显示子菜单导航
       */
    showSubNav (index) {
      // if (index === 3) {}
      this.nowId = index
    },
    /**
       * 跳转页面
       * @param item
       */
    goPage (item) {
      console.log(item)
      this.$route.push({ path: item.path })
    }
  }
}
</script>
<style lang="sass" scoped>
  #home
    height: 100%
    display: flex
    align-items: center
  .footer
    flex: 1
    ul
      display: flex
      overflow: hidden
      text-align: center
      border: 1px solid #F6F6f6
      .navItem
        flex: 1
        padding: 20px 0
        border-right: 1px solid #F6F6F6
  .subNavContainer
    display: flex
    flex-direction: column
    .subNavItem
      font-size: 14px
      padding: 10px 0
      border-right: 1px solid #F6F6F6
</style>
